import "braft-editor/dist/index.css";
import React from "react";
import BraftEditor from "braft-editor";
import { ContentUtils } from "braft-utils";
// import { ImageUtils } from "braft-finder";
import PropTypes from "prop-types";
import { FileImageOutlined } from "@ant-design/icons";
import { Upload, message } from "antd";
import "./style.less";
// import "@/style/view-style/editor.less";
const options = {
    defaultValue: 200, // 指定默认限制数，如不指定则为Infinity(无限)--富文本
};
const controls = [
    "undo",
    "redo",
    "separator",
    "font-size",
    "text-color",
    "bold",
    "italic",
    "underline",
    "strike-through",
    "separator",
    "superscript",
    "subscript",
    "remove-styles",
    "emoji",
    "separator",
    "text-indent",
    "text-align",
    "separator",
    "headings",
    "list-ul",
    "list-ol",
    "blockquote",
    "separator",
    "link",
    "separator",
    "separator",
    "separator",
    "clear",
];
class TheQuill extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            editorState: BraftEditor.createEditorState(this.props.defaultValue),
            data: '',
            defaultValue: this.props.defaultValue
        }
    }

    static getDerivedStateFromProps(nextProps, prevState) {
        //该方法内禁止访问this
        if (!prevState.defaultValue && nextProps.defaultValue ) {
            //通过对比nextProps和prevState，返回一个用于更新状态的对象
            return {
                defaultValue: nextProps.defaultValue,
                editorState: BraftEditor.createEditorState(nextProps.defaultValue)
            }
        }
        //不需要更新状态，返回null
        return null
    }

    /**
     * @desc 富文本修改事件
     * */
    handleChange = (editorState) => {
        // 获取编辑器的文本内容状态
        const currentContent = editorState.getCurrentContent();
        // 获取编辑器文本长度，getPlainText返回当前编辑器的文本内容，字符串类型
        const currentContentLength = currentContent.getPlainText('').length;
        if (this.props.maxTextLength) {
            if (currentContentLength > this.props.maxTextLength) {
                this.setState({
                    editorState: BraftEditor.createEditorState(this.state.data),
                })
                message.info({
                    content: "超出最大字数" + this.props.maxTextLength + "限制",
                })
                // 回传数据
                this.props.setNewsContent(this.state.data, currentContentLength);
            } else {
                this.setState({
                    data: editorState.toHTML(),
                    editorState,
                })
                // 回传数据
                this.props.setNewsContent(editorState.toHTML(), currentContentLength);
            }
        }
        else {
            this.setState({ editorState });
            this.props.setNewsContent(editorState.toHTML(), currentContentLength);
        }
    };
    /**
     * @desc 上传图片事件
     * */
    uploadHandler = (param) => {
        if (!param.file) {
            return false;
        }
        let formdata = new FormData();
        formdata.append("file", param.file);
        React.$postMedia("management/oss/image/upload", formdata).then((res) => {
            this.setState({
                editorState: ContentUtils.insertMedias(this.state.editorState, [
                    {
                        type: "IMAGE",
                        url: res.data,
                    },
                ]),
            });
        });
    };
    handleBeforeInput = (e, editorState) => {
        // return 'handled'
    }
    upData = (v, length) => {
        this.setState({
            editorState: BraftEditor.createEditorState(v,)
        })
    };
    render() {
        // console.log(this.props)
        const extendControls = [
            {
                key: "antd-uploader",
                type: "component",
                component: (
                    <Upload
                        accept="image/*"
                        showUploadList={false}
                        customRequest={this.uploadHandler}
                    >
                        {/* 这里的按钮最好加上type="button"，以避免在表单容器中触发表单提交，用Antd的Button组件则无需如此 */}
                        <button
                            type="button"
                            className="control-item button upload-button"
                            data-title="插入图片"
                        >
                            <FileImageOutlined />
                        </button>
                    </Upload>
                ),
            },
        ];

        return (
            <div style={{ display: "flex", justifyContent: "center", marginBottom: 20 }}>
                <div className="editor-wrapper" style={{ width: this.props.width }}>
                    <BraftEditor
                        value={this.state.editorState}
                        onChange={this.handleChange}
                        controls={controls}
                        extendControls={extendControls}
                        handleBeforeInput={this.handleBeforeInput}
                        // maxLength={this.props.maxTextLength ?? Infinity}
                        // onReachMaxLength={this.handleMaxLength}
                    />
                </div>
            </div>
        );
    }
}
TheQuill.propTypes = {
    value: PropTypes.string,
    setNewsContent: PropTypes.func,
    maxTextLength: PropTypes.number
};
TheQuill.defaultProps = {
    value: null,
    width: "100%",
    maxTextLength: 0
};
export default TheQuill;
